import { Form } from "antd";
import { ProductMenuCreateDto } from "@/definition/dto/ProductDto";
import { useEffect } from "react";
import { FormItemInput, FormItemRadio, FormInputNumber, FormItemButton } from "@components/antd/form/index";
import { ProductMenusStatus } from "@enum/ProductEnum";
import { message } from "antd";
import { API } from "@/request/api";
import { useParams,useNavigate } from "react-router-dom";
const ProductMenuDetails = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm<ProductMenuCreateDto>();
    const { id = '' } = useParams();
    const getMenuDetails = async () => {
        const { menu, sort, status } = await API.queryProductMenuItem(id);
        form.setFieldsValue({ menu, sort, status });
    }
    const onComfirm = async () => {
        if (id) await API.updateProductMenuItem(id, form.getFieldsValue());
        else await API.createProductMenuItem(form.getFieldsValue());
        message.success("创建成功");
        navigate('/products/menus');
    }
    const onReset = () => {
        form.resetFields();
    }
    useEffect(() => {
        id && getMenuDetails();
    }, []);

    return (
        <>
            <Form labelCol={{ span: 2 }} form={form}>
                <FormItemInput require name="menu" label="分组名" />
                <FormInputNumber require name="sort" label="排序值" />
                <FormItemRadio name="status" label="状态" options={ProductMenusStatus} />
                <FormItemButton offset={2} onReset={onReset} onConfirm={onComfirm}></FormItemButton>
            </Form>
        </>
    )
}
export default ProductMenuDetails;